<template>
  <a-modal class="invoiceExamine_modal" v-model="visible" :title="title" :confirmLoading="submitLoading" width="800px"
    :footer="null">
    <a-form :form="events_form">
      <a-form-item label="已选择">
        <a-statistic :value="orderInfoList.length" suffix="项" :value-style="{ color: '#3f8600' }">
        </a-statistic>
      </a-form-item>
      <a-form-item label="合计开票金额">
        <a-statistic :value="invoiceInfo.invoiceAmount" suffix="元" :value-style="{ color: '#D9001B' }">
        </a-statistic>
      </a-form-item>
      <a-table :columns="orderInfoColumns" :data-source="orderInfoList" :pagination="false" rowKey="orderId">
      </a-table>
      <a-card title="开票信息" style="margin-top: 10px;">
        <div v-for="item, index in invoiceInfo.invoiceDetailList" :key="index">
          <a-form-item :label="item.invoiceFeeType == 1 ? '结算开票合计' : '服务费开票合计'">
            <a-statistic :value="item.invoiceAmount" suffix="元" :value-style="{ color: '#D9001B' }">
            </a-statistic>
          </a-form-item>
          <br />
          <a-form-item label="发票类型">
            <div class="info">{{ item.invoiceTypeDesc }}</div>
          </a-form-item>
          <a-form-item label="发票类目">
            <div class="info">{{ item.invoiceCategoryDesc }}</div>
          </a-form-item>
          <a-form-item label="税率">
            <div class="info">{{ item.invoiceTaxRate }}</div>
          </a-form-item>
          <a-form-item label="备注">
            <div class="info">{{ item.remark }}</div>
          </a-form-item>
          <a-form-item label="不含税价(元)">
            <div class="info">{{ item.invoiceNoTaxPrice }}</div>
          </a-form-item>
          <a-form-item label="税额">
            <div class="info">{{ item.invoiceTaxAmount }}</div>
          </a-form-item>
        </div>
      </a-card>
      <a-card title="抬头信息" style="margin-top: 10px;">
        <a-form-item label="公司名称">
          <div class="info">{{ invoiceInfo.enterpriseName }}</div>
        </a-form-item>
        <a-form-item label="纳税人识别号">
          <div class="info">{{ invoiceInfo.titleTaxpayerNumber }}</div>
        </a-form-item>
        <a-form-item label="电话">
          <div class="info">{{ invoiceInfo.titlePhone }}</div>
        </a-form-item>
        <a-form-item label="地址">
          <div class="info">{{ invoiceInfo.titleAddress }}</div>
        </a-form-item>
        <a-form-item label="开户行">
          <div class="info">{{ invoiceInfo.titleBank }}</div>
        </a-form-item>
        <a-form-item label="银行账号">
          <div class="info">{{ invoiceInfo.titleBankAccount }}</div>
        </a-form-item>
      </a-card>
      <a-card title="邮寄地址" style="margin-top: 10px;">
        <a-form-item label="收件人姓名">
          <div class="info">{{ invoiceInfo.mailName }}</div>
        </a-form-item>
        <a-form-item label="收件人电话">
          <div class="info">{{ invoiceInfo.mailPhone }}</div>
        </a-form-item>
        <a-form-item label="省份">
          <div class="info">{{ invoiceInfo.mailProvince }}</div>
        </a-form-item>
        <a-form-item label="城市">
          <div class="info">{{ invoiceInfo.mailCity }}</div>
        </a-form-item>
        <a-form-item label="县(区)">
          <div class="info">{{ invoiceInfo.mailArea }}</div>
        </a-form-item>
        <a-form-item label="详细地址">
          <div class="info">{{ invoiceInfo.mailAddress }}</div>
        </a-form-item>
      </a-card>
      <div v-if="invoiceInfo.invoiceFileInfoList.length > 0">
        <a-card title="发票信息" style="margin-top: 10px;">
          <a-form-item v-for="item in invoiceInfo.invoiceFileInfoList" :key="item.invoiceFileId" style="width: 100%;">
            <div class="infoList">
              {{ item.fileName }}
              <a :href="item.fileUrl" :download="item.fileUrl" target="_blank">下载</a>
            </div>
          </a-form-item>
        </a-card>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
import {
  invoiceApplyInfoLoad,
  invoiceTitleQuery,
  invoiceMailQuery,
  submitInvoiceApply,
  invoiceApplyQuery
} from "@/api/human/finance"
import {
  getEnterpriseInfo,
} from "@/api/human/enterprise"
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      submitLoading: false,

      invoiceInfo: {}, // 查看详情信息
      orderInfoColumns: [{
        title: '订单编号',
        dataIndex: 'orderId'
      }, {
        title: '订单名称',
        dataIndex: 'orderName'
      }, {
        title: '结算成功金额',
        dataIndex: 'orderAmount',
      }, {
        title: '服务费金额',
        dataIndex: 'serviceFee',
      }, {
        title: '开票金额',
        dataIndex: 'invoiceAmount',
      }], // 订单配置项
      orderInfoList: [], // 选择的订单详情

    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    async add(row, enterpriseId, tab) {
      this.title = "开票详情";
      this.visible = true;
      let { code, data } = await invoiceApplyQuery(row)
      if (code == '1') {
        this.invoiceInfo = data;
        this.orderInfoList = data.orderInfoList;
      }
    }
  }
}
</script>
<style lang="less">
.invoiceExamine_modal {
  .formRequired {
    .ant-form-item-label::before {
      display: inline-block;
      margin-right: 4px;
      color: #f5222d;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }

  .ant-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;
    display: inline-block;

    .ant-form-item-label {
      width: 30%;
      text-align: left;
    }

    .ant-form-item-control-wrapper {
      width: 80%;
    }

    .info {
      width: 100%;
      height: 32px;
      padding: 4px 11px;
      border: 1px solid #d9d9d9;
      line-height: 1.5;
      border-radius: 4px;
    }

    .infoList {
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
    }
  }

}
</style>
